<template>
  <flexbox align="flex-start" class="person-center" v-loading="loading">
    <div class="left">
      <flexbox class="user-box" align="center" direction="column">
        <xr-avatar
          :name="userInfo.realname"
          :size="75"
          :src="userInfo.img"
          class="user-img"
        />
        <span class="username mt-10">
          {{ userInfo.realname }}
        </span>
        <div
          class="change-avatar cursor-pointer mt-10"
          @click="handleChangeAvatar"
        >
          更换头像
        </div>
      </flexbox>
      <ul class="nav-list">
        <li
          v-for="(item, index) in navList"
          :key="index"
          :class="{ active: selectedIndex === index }"
          class="nav-list-item"
          @click="selectedIndex = index"
        >
          <img
            :src="selectedIndex === index ? item.iconActive : item.icon"
            class="icon"
          />
          <span class="text">
            {{ item.label }}
          </span>
        </li>
      </ul>
    </div>
    <div class="right">
      <edit-user-info v-if="selectedIndex === 0" @change="getDetail" />
      <edit-pwd v-if="selectedIndex === 1" />
    </div>

    <input
      id="inputFile"
      type="file"
      accept="image/png, image/jpeg, image/gif, image/jpg"
      style="display: none;"
      @change="uploadFile"
    />

    <edit-image
      :show="showEditImage"
      :file="editFile"
      :image="editImage"
      @save="submitImage"
      @close="showEditImage = false"
    />
  </flexbox>
</template>

<script>
import { mapGetters } from "vuex";
import { adminUsersUpdateImgAPI } from "@/api/user/personCenter";
import EditUserInfo from "./components/EditUserInfo";
import EditPwd from "./components/EditPwd";
import EditImage from "@/components/EditImage";
export default {
  name: "PersonCenter",
  components: {
    EditUserInfo,
    EditPwd,
    EditImage
  },
  data() {
    return {
      loading: false,
      showEditImage: false,
      editFile: null,
      editImage: null,
      form: {},
      selectedIndex: 0 // 0 个人信息 1 账号密码 2 名片信息
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
    navList() {
      const navs = [
        {
          label: "个人信息",
          icon: require("@/assets/img/user.png"),
          iconActive: require("@/assets/img/user-active.png")
        },
        {
          label: "账号密码",
          icon: require("@/assets/img/password.png"),
          iconActive: require("@/assets/img/password-active.png")
        }
      ];
      return navs;
    }
  },
  created() {
    this.getDetail();
    this.form = Object.assign({}, this.userInfo);
  },
  methods: {
    getDetail() {
      this.loading = true;
      this.$store
        .dispatch("GetUserInfo")
        .then(() => {
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    /**
     * 上传提交头像修改
     * @param data
     */
    submitImage(data) {
      this.loading = true;
      const param = new FormData();
      param.append("userId", this.form.userId);
      param.append("file", data.blob, data.file.name);
      adminUsersUpdateImgAPI(param)
        .then(() => {
          this.loading = false;
          this.getDetail();
        })
        .catch(() => {
          this.loading = false;
        });
    },
    /**
     * 图片操作
     * @param event
     */
    uploadFile(event) {
      const files = event.target.files;
      const file = files[0];
      const reader = new FileReader();
      const self = this;
      reader.onload = function(e) {
        let result;
        if (typeof e.target.result === "object") {
          // 把Array Buffer转化为blob 如果是base64不需要
          result = window.URL.createObjectURL(new Blob([e.target.result]));
        } else {
          result = e.target.result;
        }
        self.editImage = result;
        self.editFile = file;
        self.showEditImage = true;
        e.target.value = "";
      };
      reader.readAsDataURL(file);
    },
    handleChangeAvatar() {
      document.getElementById("inputFile").click();
    }
  }
};
</script>

<style scoped lang="scss">
.person-center {
  background-color: white;
  height: 100%;
  .left {
    width: 285px;
    margin: 16px 0;
    background-color: white;
    .user-box {
      margin: 25px 0;
      .user-img {
        width: 72px;
        height: 72px;
      }
      .username {
        flex: 1;
        font-size: 14px;
        color: #333;
      }
      .change-avatar {
        width: 78px;
        height: 24px;
        border: 1px solid #0166ff;
        color: #247cfa;
        border-radius: 2px;
        text-align: center;
        line-height: 24px;
      }
    }
    .nav-list {
      width: 100%;
      &-item {
        height: 50px;
        color: #666;
        padding: 0 16px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        cursor: pointer;
        .icon {
          margin-right: 10px;
          width: 18px;
          height: 18px;
        }
        &.active {
          color: #0066f9;
          background-color: #edf1fc;
        }
      }
    }
  }
  .right {
    flex: 1;
    border-left: 1px solid #e6e6e6;
    margin: 16px 0;
    overflow: hidden;
  }
}
</style>
